<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col
        :span="18"
      >
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <img
                class="pic1"
                src="http://www-wms-java.itheima.net/img/dashboard-banner-left@2x.5afd2949.png"
                alt=""
              >
              <img
                class="pic2"
                src="http://www-wms-java.itheima.net/img/dashboard-banner-right@2x.28195570.png"
                alt=""
              >
              <div class="pic3">
                <img
                  src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
                  alt=""
                >
                <p>仓库管理员</p>
              </div>
              <div class="text">
                <h4>我不是为了输赢，我就是认真！</h4>
                <p>——罗永浩</p>
              </div>
              <div class="add">
                北京总仓
              </div>
            </div>
          </el-col>
          <el-col class="navbar" :span="24">
            <h3>代办信息</h3>
            <div class="order">
              <div v-for="(item ,index) in infoList" :key="item.name" class="card">
                <div class="title">
                  <i
                    class="iconfont "
                    :class="(item.name === '入库单' && 'icon_db_rukudan@2x icon_db_rukudan2x')
                      || (item.name === '出库单' && 'icon_db_chukudan@2x icon_db_chukudan2x')
                      || (item.name === '盘点单' && 'icon_db_pandiandan@2x icon_db_pandiandan2x') "
                  />
                  <span>{{ item.name }}</span>
                </div>
                <div class="info">
                  <p>新增：<span>{{ item.value1 }}</span> 待审核 <span :class="`color${index}`">{{ item.value2 }}</span></p>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6"><div class="grid-content">
        <h4>通知/公告</h4>
        <ul>
          <li>
            <p>紧急盘点通知</p>
            <p>2020.12.30  18：23：14</p>
          </li>
          <li>
            <p>运维服务器更新通知</p>
            <p>2021.01.25 18：23：14</p>
          </li>
          <li>
            <p>客户入库变更通知</p>
            <p>2021.01.26 18：23：14</p>
          </li>
          <li>
            <p>五一放假通知</p>
            <p>2021.02.15 18：23：14</p>
          </li>
          <li>
            <p>品达物流系统对接通知</p>
            <p>2021.03.25 18：23：14</p>
          </li>
        </ul>
      </div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <TaskBar />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <TaskInfo />
      </el-col>
    </el-row>
    <div class="box">

      <el-row>
        <el-col :span="24">
          <AreaInfo />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

import { todoInfo } from '@/api'
import TaskBar from './components/taskBar.vue'
import TaskInfo from './components/taskInfo.vue'
import AreaInfo from './components/areaInfo.vue'
export default {
  name: 'Dashboard',
  components: {
    TaskBar,
    TaskInfo,
    AreaInfo
  },
  data() {
    return {
      infoList: []
    }
  },

  async created() {
    const res = await todoInfo()
    // console.log(res)
    this.infoList = res.data
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 30px;
  .bg-purple {
    position: relative;
    width: 100%;
    height: 148px;
    background: linear-gradient(270deg, #ffc771, #ffa634);
    box-shadow: 0 0 6px 0 rgb(188 151 69 / 12%);
    border-radius: 12px;
    img {
      height: 100%;
    }
    .pic2 {
      position: absolute;
      right: 0;
    }
    .pic3 {
      width: 166px;
      height: 148px;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      p {
        margin-top: -15px;
        padding: 0;
        text-align: center;
        width: 100%;
      }
      img {
        width: 62px;
        height: 62px;
      }
    }
    .text {
      height: 100px;
      color: #fff;
      position: absolute;
      top: 20px;
      left: 200px;
      p {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
  .add {
    position: absolute;
    right: 20px;
    top:20px;
    color: #000;
    padding: 10px 30px;
    border-radius: 5px;
    background-color: #f9ead7;
  }
}
.navbar {
  margin-top: 20px;
  background-color: #fff;
padding: 10px;
border-radius: 20px;
  .order {
    width: 100%;
    height: 186px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .card{
      box-sizing: border-box;
      flex: 1;
      padding: 10px;
      margin-right: 20px;
      background-color: #f2f2f2;
      .title {
        height: 80px;
      }
      .info {
        span {
          font-size: 32px;
        }
        .color0 {
            color: #0076ff;
        }
        .color1{
          color:#ffa634;
        }
        .color2{
          color: #ff7100;
        }
      }
    }
  }
  .iconfont {
    color: #fff;
    display: inline-block;
    padding: 10px;
    margin-right: 10px;
    font-size: 32px;
    border-radius: 10px;
  }
  .icon_db_rukudan2x{
    background-color: #0076ff;
  }
  .icon_db_chukudan2x{
background-color: #ffb200;
  }
  .icon_db_pandiandan2x{
    background-color: #ff7100;
  }
}
.el-col-6{
  background-color: #fff;
  border-radius: 20px;
  h4{
    padding: 0 40px;
  }
}
.grid-content {
  height: 100%;
  background-color: #fff;
  ul{
    padding: 0 40px;
    box-sizing: border-box;
    height: 100%;
    list-style: none;
    li {
      font-size: 14px;
      border-top: 1px solid #c4c4c4;
    }
  }
}
.box{
  margin-top: 20px;
  padding: 20px;
  width: 100%;
  background-color: #fff;
  border-radius: 20px;

}
</style>
